<template>
  <div class="qaPaint">
    <div id="gid_tc" style="float:left;">
      <div id="gid"></div>
      <div class="mengceng"></div>
    </div>
    <view-node-component :KG="KG" />
  </div>
</template>

<script>
import viewNodeComponent from "@/views/kgeditor/components/viewNode/viewNodeComponent";
import { KG } from "@/utils/graph/KG";

// let nameMapInfo = {
//   kgNameName: "kgName",
//   kgIdName: "kgID",
//   typeListName: "types",
//   nodesName: "nodes",
//   linksName: "properties",
//   typeIdName: "id",
//   nodeIdName: "id",
//   linkIdName: "id",
//   typeNameName: "label_ZH",
//   typeColorName: "color",
//   typeRName: "radius",
//   nodeUriName: "uri",
//   nodeLabelName: "label_ZH",
//   nodeTypeIdName: "typeId",
//   sIdName: "sourceId",
//   tIdName: "targetId",
//   predicateName: "label_ZH",
//   nodeColorName: "color",
//   nodeRName: "radius",
//   nodeXName: "hor",
//   nodeYName: "ver"
// };

export default {
  name: "qaPaint",
  props: ["kg"],
  components: {
    viewNodeComponent
  },
  data() {
    return {
      KG: false,
      kgData: {}
    };
  },
  created() {
    if (this.kg == null) this.initDefaultKG();
    else this.kgData = this.kg;
  },
  mounted() {
    if (!this.KG) {
      this.KG = null;
    }

    console.log("TTTTT",JSON.parse(JSON.stringify( this.kgData )))

    this.KG = new KG("gid", true, this.kgData, this, null);
    //屏蔽一些事件
    this.KG.changeEvents([
      { eventName: "selectNode", valid: false },
      { eventName: "btnDeleteNode", valid: false }
    ]);
    this.KG.display();

    let qaPaintDOC = document.querySelector(".qaPaint");
    this.KG.zoomToPosition(
      qaPaintDOC.clientWidth / 2,
      qaPaintDOC.clientHeight / 2,
      1
    );
  },
  methods: {
    initDefaultKG() {
      this.kgData = {
        properties: [],
        nodes: [
          {
            id: 1,
            label_ZH: "COVID19",
            typeId: 1,
            uri: "defaultKG",
            color: "#409EFF"
          }
        ],
        types: [
          {
            id: 1,
            labelZH: "defaultType",
            uri: "defaultType"
          }
        ]
      };
    }
  }
};
</script>

<style scoped>
.qaPaint {
  background-color: #409eff;
  height: 100%;
  width: 100%;
}
#gid_tc {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
#gid {
  height: 100%;
  width: 100%;
}
</style>
